<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button [defaultHref]="'/tabs/myCredit'"></ion-back-button>
    </ion-buttons>
    <ion-title>{{'myCredit.transaction_page.page_title' | translate}}</ion-title>
    <div class="trans_title">
      
     <a [routerLink]="[ '/tabs/myCredit/transaction-statistics']">
        <!-- <ion-icon name="pie-chart-outline" size="large"></ion-icon>  -->
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#iconstatistics"></use>
        </svg>
      </a> 
    </div>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list id="list">
    <ion-list-header>
      <ion-grid>
        <ion-row>
          <ion-col size-sm class="ion-padding-end">
            <ion-select interface="popover" class="i_select" name="dateType" value="2">
              <ion-select-option *ngFor="let item of dateTypes" value="{{item.num}}">{{item.type}}</ion-select-option>
            </ion-select>
          </ion-col>
          <ion-col size-sm>
            <ion-select interface="popover" class="i_select" value="1">
              <ion-select-option value="1"> {{'myCredit.transaction_page.category' | translate}}</ion-select-option>
            </ion-select>
          </ion-col>
          <ion-col></ion-col>
          <ion-col></ion-col>
          <ion-col></ion-col>
          <ion-col size-sm>
            <ion-select interface="popover" class="i_select" value="1">
              <ion-select-option value="1"> {{'myCredit.transaction_page.filter' | translate}}</ion-select-option>
            </ion-select>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-list-header>

    <ion-item-group>
      <div *ngFor="let i of items">
        <div *ngFor="let item of datas">
          <!-- <ion-item-divider>
          </ion-item-divider> -->
          <ion-item-divider class="divider_item">
              <ion-label class="vertical_center">{{item.month | monthFormat}}</ion-label>

              <ion-label slot="end" style="padding-right: 10px;" class="label_item">
              <p> {{'myCredit.transaction_page.balance' | translate}} ${{item.balance}} </p>
            </ion-label>
            <ion-label slot="end"  class="label_item">
              <p> {{'myCredit.transaction_page.cashback' | translate}} $ {{item.cashback}} </p>
            </ion-label>
          </ion-item-divider>
          <ion-item lines="full" *ngFor="let detail of item.details" (click)="toDetail(detail)">
            <ion-avatar slot="start">
              <div style="width: 100%;height: 100%;border: 1px black solid;">

              </div>
            </ion-avatar>
            <ion-label slot="start">
              <h2>{{detail.merchantName}}</h2>
              <p>{{detail.transactionTime | date:'MM-dd HH:mm'}}</p>
            </ion-label>
            <ion-label slot="end" class="amt" [ngClass]="{'len_text': (detail.amount+'').length > 6 ? true : false}">
              -{{detail.amount}}
            </ion-label>
          </ion-item>
        </div>
      </div>
    </ion-item-group>
  </ion-list>
<!--   <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll> -->
</ion-content>